<template>
  <GroupPage title="服务评价明细" group-size="small" group-title="收费员信息" content-title="服务评价信息">
    <template #group>
      <a-input-search
        v-model:value="collectorKeyword"
        class="mb-4"
        placeholder="搜索收费员名称"
        @search="handleCollectorSearch"
      />
      <SpinSkeleton v-show="tableLoading || tableData.length > 0" :loading="tableLoading">
        <a-tree
          v-if="tableData && tableData.length > 0"
          :field-names="{ title: 'tollCollector', key: 'id' }"
          :tree-data="tableData"
          :selected-keys="selectedKeys"
          show-line
          @select="selectCollector"
        />
      </SpinSkeleton>
      <SlEmpty v-show="!tableLoading && tableData.length === 0" :description="emptyText"></SlEmpty>
    </template>
    <template #content>
      <SearchForm class="mb-0 mx-7 mt-6" :columns="contentColumns" :select-data="selectData" @search="onSearchContent">
      </SearchForm>
      <div class="flex-1 overflow-hidden">
        <SlTable
          v-model:expanded-row-keys="expandedRowKeys"
          class="mx-7"
          :columns="contentColumns"
          row-key="id"
          :data-source="contentListData"
          :loading="contentListLoading"
          :search-model="conntentSearchModel"
          :ignore-keys="['collectorId']"
          :has-row-render="true"
          @expand="expand"
        >
          <template #bodyCell="{ column, record }: BodyCellOptions<PartialServiceEvaluation>">
            <a-rate
              v-if="['smile', 'welcome', 'delivery', 'term', 'quality'].includes(column.dataIndex as string)"
              v-model:value="record[column.dataIndex as string]"
              class="!text-base"
              :allow-clear="false"
              allow-half
              disabled
            ></a-rate>
          </template>
          <template #expandedRowRender="{ record }: ExpandedRowRenderOptions<PartialServiceEvaluation>">
            <sl-chart class="h-64" :option="getChartOptions(record)" />
          </template>
        </SlTable>
      </div>
    </template>
  </GroupPage>
</template>
<script lang="ts" setup>
import { message } from "ant-design-vue";
import { computed, onMounted, ref, watch } from "vue";
import { useI18n } from "/@/locales/useI18n";

import type { ServiceEvaluationItem, PartialServiceEvaluation } from "/@/api/main/statisticalReport/models";
import { Api } from "/@/api/main/statisticalReport";
import type { TollCollectorItem } from "/@/api/main/civilizedService/models";
import { Api as csApi } from "/@/api/main/civilizedService";
import { useCURD } from "/@/hooks/useCURD";
import { RequestMethodEnum } from "/@/api/req/httpEnum";

import { useEmptyText } from "/@/hooks/useEmptyText";
import { PatternKey } from "/@/utils/verify";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import { LabelSelectType } from "/@/types/components";
import type { BodyCellOptions, ExpandedRowRenderOptions } from "/@/types/antd";
import { handleDateRowRender } from "/@/utils/common";
import { EChartsOption } from "/@/components/SlChart/models";
const { t } = useI18n();
/**
 * 收费员
 */
//查询收费员
const collectorKeyword = ref("");
async function handleCollectorSearch() {
  await reloadTable({
    model: {
      noName: collectorKeyword.value,
    },
  });
}
const { tableData, tableLoading, reloadTable, searchModel } = useCURD<TollCollectorItem & { key: string }>({
  getPageUrl: csApi.tollCollectorsPage,
  pageSize: 999,
  loadOnMounted: false,
  onLoadSuccess(data) {
    if (data.length > 0) {
      selectedKeys.value = [data[0].id as number];
    } else {
      contentListData.value = [];
    }
  },
});

const { emptyText, modelForEmptyText } = useEmptyText();
watch(
  searchModel,
  (v) => {
    modelForEmptyText.value = v;
  },
  { deep: true }
);
//当前所选收费员id
const selectedKeys = ref<number[]>([]);
watch(selectedKeys, () => {
  onSearchContent();
});
function selectCollector(keys, { node }) {
  selectedKeys.value = [node.id];
}
/**
 * 入口
 */
onMounted(async () => {
  //加载班组
  await reloadTable();
});
/**
 * 服务评价内容
 */
const {
  tableData: contentListData,
  tableLoading: contentListLoading,
  reloadTable: reloadContentTable,
  searchModel: conntentSearchModel,
} = useCURD<ServiceEvaluationItem>({
  getPageUrl: Api.serviceEvaluation,
  loadOnMounted: false,
  onLoadSuccess(data) {
    if (data.length > 0) {
      expandedRowKeys.value = [data[0].id];
    }
  },
});

// 查询服务评价数据
const selectData = [
  {
    label: "收费时间",
    key: "dateRange",
    selectType: LabelSelectType.rangePicker,
    props: {
      showTime: {
        format: "HH:mm:ss",
      },
      format: "YYYY-MM-DD HH:mm:ss",
    },
  },
];
async function onSearchContent(model?) {
  console.log("onSearchContent", model);
  const collectorId = selectedKeys.value[0];
  if (collectorId === undefined) {
    contentListData.value = [];
  } else {
    model = model || {};
    model.collectorId = collectorId;
    if (model.dateRange) {
      model.startTime = model.dateRange[0];
      model.endTime = model.dateRange[1];
      delete model.dateRange;
    } else if (model.dateRange === null) {
      model.startTime = null;
      model.endTime = null;
    }
    reloadContentTable({
      model,
    });
  }
}
const contentColumns = ref([
  {
    title: "班组名称",
    dataIndex: "teamName",
  },
  {
    title: "收费员名称",
    dataIndex: "collector",
  },
  {
    title: "微笑服务评分",
    dataIndex: "smile",
  },
  {
    title: "迎车服务评分",
    dataIndex: "welcome",
  },
  {
    title: "送车服务评分",
    dataIndex: "delivery",
  },
  {
    title: "文明用语评分",
    dataIndex: "term",
  },
  {
    title: "服务质量评分",
    dataIndex: "quality",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    customRender: handleDateRowRender,
  },
]);
const expandedRowKeys = ref<number[]>([]);
function expand(expanded, record: PartialServiceEvaluation) {
  const id = record.id as number;
  if (expanded) {
    if (!expandedRowKeys.value.includes(id)) {
      expandedRowKeys.value.push(id);
    }
  } else {
    const i = expandedRowKeys.value.findIndex((el) => el === id);
    if (i >= 0) {
      expandedRowKeys.value.splice(i, 1);
    }
  }
}
//
function getChartOptions(record: PartialServiceEvaluation): EChartsOption {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      left: 20,
      top: "center",
      orient: "vertical",
      inactiveBorderWidth: 0,
      icon: "circle",
      textStyle: {
        fontSize: 14,
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        center: ["50%", "50%"],
        roseType: "area",
        avoidLabelOverlap: true,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 2,
        },
        data: [
          { name: "微笑", value: record.smile },
          { name: "迎车", value: record.welcome },
          { name: "送车", value: record.delivery },
          { name: "文明用语", value: record.term },
        ],
      },
    ],
  };
}
</script>
